<!DOCTYPE html>
<!--课程详情布局，另一个是课程界面-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--让手机版生效-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/styles/lesson.css" th:href="@{/styles/lesson.css}">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
</head>
<body>
    <div class="lesson-root">
        <!--顶部第几周指示栏-->
        <div class="week-time-div">
            <!--注意th:text的拼接字符串方法-->
            <a onclick="toReallyWeek()">
                <span id="week-time" th:text="'第' + ${this_week} + '周'"></span>
            </a>
            <a href="/lesson" target="_blank">
                <img id="expands" th:src="@{/images/expand.png}" src="../static/images/expand.png" alt="">
            </a>
            <!--切换周数-->
            <div id="switch-week">
                <a onclick="beforeWeek()">
                    <img id="before-week" th:src="@{/images/arrow-back.png}" src="../static/images/arrow-back.png" alt="">
                </a>
                <a onclick="afterWeek()">
                    <img id="after-week" th:src="@{/images/arrow-forward.png}" src="../static/images/arrow-forward.png" alt="">
                </a>
            </div>
        </div>
        <!--日期栏-->
        <div class="date-bar">
            <div class="date" id="date-month-div">
                <span id="date-month" th:text="${date_list[0]}">
                    月份
                </span>
            </div>
            <div class="date" id="date-div-1">
                <!--使用utext可以解析html标签-->
                <span id="date-mon" th:utext="${date_list[1]}">
                    周一
                </span>
            </div>
            <div class="date" id="date-div-2">
                <span id="date-tues" th:utext="${date_list[2]}">
                    周二
                </span>
            </div>
            <div class="date" id="date-div-3">
                <span id="date-wed" th:utext="${date_list[3]}">
                    周三
                </span>
            </div>
            <div class="date" id="date-div-4">
                <span id="date-thur" th:utext="${date_list[4]}">
                    周四
                </span>
            </div>
            <div class="date" id="date-div-5">
                <span id="date-fri" th:utext="${date_list[5]}">
                    周五
                </span>
            </div>
            <div class="date" id="date-div-6">
                <span id="date-sat" th:utext="${date_list[6]}">
                    周六
                </span>
            </div>
            <div class="date" id="date-div-7">
                <span id="date-sun" th:utext="${date_list[7]}">
                    周日
                </span>
            </div>
        </div>
        <iframe id="lesson-detail" src="/lesson_detail"></iframe>
    </div>
</body>
<!--最开始传递数组的时候引号总是被当作字符处理，这里加上th:inline就可以正常了-->
<script type="text/javascript" th:inline="javascript">
    window.onload = function () {
        setTodayDiv();

        //解绑默认右键点击绑定自己的右键用于实现自定义操作
        document.oncontextmenu = function () {
            return false;
        }
    };
    //设置“今日”指示器
    function setTodayDiv() {
        $(function () {
            //用户配置
            const userConfig = [[${user_config}]];
            //设置文字颜色
            $(".date").css("color", userConfig.textColor);
            $(".date").css("font-size", userConfig.textSize + "px");

            //todo 有道记录一下
            //如果当前页面不是以frame嵌入的，就应该设置颜色为黑色
            //但是吧下面的代码正好相反，蜜汁代码...
            if (window.parent.frames[0] != window.self) {
                $('.date').css("color", "#000000");
            }

            //如果当前显示的周就是真正的本周，那么高亮今天DIV
            if ([[${this_week}]] == [[${really_this_week}]]) {
                const todayDivId = '#date-div-' + [[${today_of_week}]];
                $(todayDivId).css("background-color", userConfig.dateColor);
                $(todayDivId).css("color", "white");
            }
        })
    }

    function beforeWeek() {
        switchWeek([[${this_week}]] - 1)
    }

    function afterWeek() {
        switchWeek([[${this_week}]] + 1);
    }

    function toReallyWeek() {
        //如果当前不是本周就跳转到本周
        if ([[${this_week}]] != [[${really_this_week}]]) {
            switchWeek([[${really_this_week}]]);
        }
    }

    function switchWeek(nowWeek) {
        $(function () {
            $.ajax({
                type: 'POST',
                url: '/switch_week',
                dataType: 'json',
                data: {now_week:nowWeek},
                success: function (result) {
                    if (result.resultCode == 200) {
                        location.href = '/lesson'
                    } else {
                        Swal.fire('错误', '跳转失败了', 'error')
                    }
                },
                error: function () {
                    Swal.fire('错误', '跳转失败了', 'error')
                }
            })
        })
    }
</script>
</html>